<template>
  <div class="cq-con-brand w1160">
    <cq-title imgUrl="title-brand.png" title="橙品牌" ingWidth="391" imgHeight="86" />
    <ul class="cq-con-list flex flex-between">
        <li :class="item.liClassName" v-for="item in conListData" :key="item.liClassName">
            <div class="con-list-mask">
                <img :src="$utils.getImg(item.imgName)" width="90"  height="90" alt="cyx" />
                <h3 class="c-fff fz28 fw200">橙营销</h3>
                <p class="c-da fz16">营销助品牌升级</p>
                <btn-more :className="cqConList">了解更多</btn-more>
            </div>
        </li>
    </ul>
    
  </div>
</template>

<script>
import CqTitle from './cq-title.vue'
import BtnMore from './btn-more'
export default {
  name: 'CqBrand',
  components: { CqTitle, BtnMore },
  data() {
    return {
      cqConList: ['btn-brand', 'bgc-white', 'toggle-show'],
      conListData: [
        {
          title: '橙营销',
          text: '营销助力品牌升级',
          liClassName: 'list-marketing',
          imgName: 'cyx.png'
        },
        {
          title: '橙营销',
          text: '营销助力品牌升级',
          liClassName: 'list-integral',
          imgName: 'cyx.png'
        },
        {
          title: '橙营销',
          text: '营销助力品牌升级',
          liClassName: 'list-financial',
          imgName: 'cyx.png'
        },
        {
          title: '橙营销',
          text: '营销助力品牌升级',
          liClassName: 'list-welfare',
          imgName: 'cyx.png'
        }
      ]
    }
  }
}
</script>

<style lang="scss" scoped>
.cq-con-brand {
    padding-top: 240px;
    padding-bottom: 148px;
}

.cq-con-title {
    text-align: center;
}

.cq-con-list {
    li {
        box-sizing: border-box;
        width: 280px;
        height: 400px;
        background: #fff url(@/assets/img/marking.jpg) no-reapt center/cover;
        text-align: center;
        transition: 0.3s;
        &list-integral {
            background-image: url(@/assets/img/integral.jpg);
        }
        &.list-marketing {
          background-image: url(@/assets/img/marketing.jpg);
        }
        &.list-welfare {
          background-image: url(@/assets/img/welfare.png);
        }
        img{
            padding-top: 108px;
        }
        h3 {
            padding-top: 38px;
            line-height: 28px;
        }
        p {
            padding-top: 13px;
            padding-bottom: 24px;
            line-height: 16px;
        }
        .con-list-mask {
            border: 1px solid #fff;
            background-color: rgba(255,255,255,0);
        }
       &:hover {
        z-index: 1;
        position: relative;
        transform: scale(1.15, 1.13);
        padding: 8px 7px;
        box-shadow: 0 0 8px rgba(88,88,88,0.9) inset; //inset 内部阴影
       }
       .con-list-mask {
        border: 1px solid #fff;
        background-color: rgba(255,255,255,0);
       }
       .con-list-mask > p {
        color: #fff;
       }
       .toggle-show {
        display: inline-block;
       }
    }
}
</style>
